<template>
	<!-- 骨架屏 -->
	<u-skeleton :loading="true" :animate="true" rows="20" v-if="isShow"></u-skeleton>
	<view v-else>
		<!-- 搜索框 -->
		<view style="margin-top: 20rpx; padding-left:20rpx">
			<u-search :show-action="true" shape="square" actionText="搜索" @search="search" @custom="search"></u-search>
		</view>
		<!-- 列表分类 -->
		<view style="margin: 0rpx 20rpx;">
			<u-tabs :list="cateList" lineColor="#FF6900" @change="tolist">
				<view slot="right" style="padding-left: 8rpx;" @tap="$u.toast('插槽被点击')">
					<u-icon name="list" size="21" bold></u-icon>
				</view>
			</u-tabs>
		</view>
		<!-- 轮播图 -->
		<u-swiper :list="bannerList" indicator circular interval="2000" indicatorActiveColor="#FF6900" height="400rpx">
		</u-swiper>
		<!-- 图标列表 -->
		<view style="padding-top:20rpx">
			<u-grid :border="false" col="5">
				<u-grid-item v-for="(item,index) in listimg" :key="item.id">
					<image :src="item.img" mode="" class="listimg"></image>
					<text style="font-size: 26rpx;">{{item.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 限时秒杀 -->
		<view class="killBox">
			<view class="leftBox">
				<view>
					限时秒杀
				</view>
				<!-- 倒计时 -->
				<u-count-down :time="timer" format="HH:mm:ss" autoStart millisecond @change="onChange">
					<view class="time">
						<view class="time__custom">
							<text
								class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.minutes }}</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.seconds }}</text>
						</view>
					</view>
				</u-count-down>
			</view>
			<view class="rightBox">
				<view class="vBox1">
					<view>
						品牌上新
					</view>
				</view>
				<view class="vBox2">
					<view>
						日用好物
					</view>
				</view>
			</view>
		</view>
		<!-- 商品分类 -->
		<u-subsection :list="titleList" :current="current" mode="subsection" activeColor="#FF6900"
			@change="sectionChange"></u-subsection>
		<!-- 商品列表 -->
		<!-- 热门推荐 -->
		<view class="shopList" v-if="current==0">
			<view class="shopBox" v-for="item in hotsList" :key="item.id">
				<view class="imgBox">
					<image :src="baseUrl+item.img" mode=""></image>
				</view>
				<view class="textBox">
					<view class="title">
						{{item.goodsname}}
					</view>
					<view class="price">
						现价格：￥{{item.price}}
					</view>
					<view class="oldprice">
						原价格：￥{{item.market_price}}
					</view>
					<view>
						<button class="btn" @click="toDetail(item.id)">点击购买</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 上新推荐 -->
		<view class="shopList" v-if="current==1">
			<view class="shopBox" v-for="item in newList" :key="item.id">
				<view class="imgBox">
					<image :src="baseUrl+item.img" mode=""></image>
				</view>
				<view class="textBox">
					<view class="title">
						{{item.goodsname}}
					</view>
					<view class="price">
						现价格：￥{{item.price}}
					</view>
					<view class="oldprice">
						原价格：￥{{item.market_price}}
					</view>
					<view>
						<button class="btn" @click="toDetail(item.id)">点击购买</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 全部商品 -->
		<view class="shopList" v-if="current==2">
			<view class="shopBox" v-for="item in allList" :key="item.id">
				<view class="imgBox">
					<image :src="baseUrl+item.img" mode=""></image>
				</view>
				<view class="textBox">
					<view class="title">
						{{item.goodsname}}
					</view>
					<view class="price">
						现价格：￥{{item.price}}
					</view>
					<view class="oldprice">
						原价格：￥{{item.market_price}}
					</view>
					<view>
						<button class="btn" @click="toDetail(item.id)">点击购买</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//引入基础地址
	import baseUrl from "@/request/baseUrl.js"
	//引入接口
	import {
		getBanner,
		cateList,
		shopList,
		getSeckill
	} from "../../request/app.js"
	export default {
		data() {
			return {
				bannerList: [],
				cateList: [],
				listimg: [{
						id: 1,
						img: "../../static/images/list1.png",
						title: "限时抢购",
					},
					{
						id: 2,
						img: "../../static/images/list2.png",
						title: "畅销商品",
					},
					{
						id: 3,
						img: "../../static/images/list3.png",
						title: "品质大牌",
					},
					{
						id: 4,
						img: "../../static/images/list4.png",
						title: "小u自营",
					},
					{
						id: 5,
						img: "../../static/images/list5.png",
						title: "积分兑换",
					},
				],
				titleList: ["热门推荐", "上新推荐", "全部商品"],
				current: 0,
				hotsList: [],
				newList: [],
				allList: [],
				baseUrl: baseUrl,
				timeData: {},
				timer: 0,
				isShow: true
			}
		},
		methods: {
			//点击跳转到列表页
			tolist(e) {
				let x = this.cateList.findIndex((item, index) => {
					return index == e.index
				})
				uni.navigateTo({
					url: "/pages/list/list?id=" + this.cateList[x].id
				})
			},
			//点击切换商品分类
			sectionChange(e) {
				this.current = e
			},
			//倒计时
			onChange(e) {
				this.timeData = e
			},
			//点击跳转到商品详情
			toDetail(id) {
				uni.navigateTo({
					url: "/pages/detail/detail?id=" + id
				})
			},
			//点击搜素商品
			search(val) {
				if (!val) {
					uni.showToast({
						title: "请输入内容",
						icon: "error"
					})
				} else {
					//跳转到列表
					uni.navigateTo({
						url: "/pages/list/list?val=" + val
					})
				}
			}
		},
		//页面一加载调用轮播图接口
		onLoad() {
			//获取轮播图响应
			getBanner().then(res => {
				console.log(res);
				if (res.data.code == 200) {
					this.bannerList = res.data.list.map(item => baseUrl + item.img)
				}
			})
			//获取分类导航响应
			cateList().then(res => {
				console.log(res);
				if (res.data.code == 200) {
					this.cateList = res.data.list.map(item => ({
						name: item.catename,
						id: item.id
					}))
				}
			})
			//获取商品列表响应
			shopList().then(res => {
				console.log(res);
				if (res.data.code == 200) {
					this.hotsList = res.data.list[0].content
					this.newList = res.data.list[1].content
					this.allList = res.data.list[2].content
				}
			})
			//获取限时秒杀信息
			getSeckill().then(res => {
				console.log(res);
				if (res.data.code == 200) {
					console.log(res);
					this.timer = res.data.list[0].endtime / 1000 - new Date().getTime() / 1000
					console.log(this.timer);
				}
			})
			setTimeout(() => {
				this.isShow = false
			}, 800)
		}
	}
</script>

<style lang="scss">
	.listimg {
		width: 70rpx;
		height: 70rpx;
	}

	.killBox {
		height: 300rpx;
		display: flex;
		padding: 20rpx;
	}

	.killBox>.leftBox {
		width: 50%;
		height: 100%;
		background: url(../../static/images/img1.png);
		margin-right: 20rpx;
	}

	.killBox>.leftBox>view {
		padding: 30rpx;
		color: #7B954B;
		font-weight: bold;
		font-size: 36rpx;
	}

	.killBox>.rightBox {
		width: 50%;
		height: 100%;
	}

	.killBox>.rightBox>.vBox1 {
		width: 100%;
		height: 60%;
		background: url(../../static/images/img2.png);
	}

	.killBox>.rightBox>.vBox1>view {
		padding: 30rpx;
		color: #765D54;
		font-weight: bold;
		font-size: 36rpx;
	}

	.killBox>.rightBox>.vBox2>view {
		padding: 30rpx;
		color: #7049B3;
		font-weight: bold;
		font-size: 36rpx;
	}

	.killBox>.rightBox>.vBox2 {
		width: 100%;
		height: 40%;
		background: url(../../static/images/img3.png);
	}

	.shopList {
		padding: 20rpx;
		background-color: #F7F7F7;
	}

	.shopBox {
		height: 300rpx;
		margin-bottom: 20rpx;
		background-color: #FFF;
		padding: 20rpx 10rpx;
		display: flex;
		border-radius: 20rpx;
	}

	.shopBox>.imgBox {
		padding-right: 40rpx;
	}

	.shopBox>.imgBox>image {
		width: 250rpx;
		height: 300rpx;
	}

	.shopBox>.textBox {
		font-size: 26rpx;
		padding-top: 20rpx;
	}

	.shopBox>.textBox>.price {
		font-weight: bold;
		color: #FF3333;
		font-size: 30rpx;
		margin-top: 20rpx;
		margin-bottom: 8rpx;
	}

	.shopBox>.textBox>.oldprice {
		text-decoration: line-through;
		margin-bottom: 20rpx;
		color: #66666d;
	}

	.shopBox>.textBox .btn {
		width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		background-color: #FF6900;
		color: #FFF;
		float: left;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		height: 80rpx;
		overflow: hidden;
	}

	/* 倒计时 */
	.time {
		@include flex;
		align-items: center;

		&__custom {
			margin-top: 8rpx;
			width: 44rpx;
			height: 44rpx;
			background-color: #7B954B;
			border-radius: 8rpx;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #fff;
				font-size: 24rpx;
				text-align: center;
			}
		}

		&__doc {
			color: #7B954B;
			padding: 0rpx 8rpx;
		}

		&__item {
			color: #606266;
			font-size: 30rpx;
			margin-right: 8rpx;
		}
	}
</style>
